<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器2</title>
    <style type="text/css">
        /*并集选择器*/
        p,ul{
            border: 1px solid red;
        }
        /*后代选择器*/
        body p{
            background:pink;
        }
        /*子选择器*/
        body p{
            background: lightblue;
        }
        /*相邻的兄弟选择器*/
        .first+p{
            background: yellow;
        }
        /*所有兄弟选择器*/
        .first~p{
            background: black;
        }
    </style>
</head>
<body>
    <p class="first">1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>5</p>
        </li>
        <li>
            <p>6</p>
        </li>
    </ul>
</body>
</html>